<template>
    <el-scrollbar max-height="100vh">
        <div class="DLogin">
            <div class="item1">
                <el-image src="/img/bg.svg" fit="fill">
                    <template #error>
                        <div class="image-slot">
                            <el-icon><IEppicture></IEppicture></el-icon>
                        </div>
                    </template>
                </el-image>
            </div>
            <div class="item2">
                <el-card
                    class="box-card animate__animated animate__fadeIn"
                    :body-style="{ padding: '0px' }"
                    shadow="never"
                >
                    <transition
                        enter-active-class="animate__animated animate__fadeIn "
                        leave-active-class="animate__animated animate__fadeOut "
                    >
                        <login v-if="Dheader.header.row1.login.isLogin"></login>
                        <register v-else></register>
                    </transition>
                    <div class="zz" @click="jh(Dheader.header.row1.login.isLogin ? 1 : 2)">
                        <transition enter-active-class="animate__animated animate__fadeIn">
                            <span v-if="Dheader.header.row1.login.isLogin"
                                ><IEpPointer></IEpPointer>注册</span
                            >
                            <span v-else>登录<IEpPointer></IEpPointer></span>
                        </transition>
                    </div>
                </el-card>
            </div></div
    ></el-scrollbar>
</template>
<script lang="ts">
export default {
    //   name: "Dlogin",
};
</script>
<script setup lang="ts">
import login from "./login/login.vue";
import register from "./login/register.vue";
import { useDheader } from "../store/Dheader";
const Dheader = useDheader();

const jh = (id: number) => {
    if (id == 1) {
        document.querySelector(".zz")?.classList.add("jh1");
        setTimeout(() => {
            Dheader.header.row1.login.isLogin = false;
            document.querySelector(".zz")?.classList.add("jh2");
        }, 500);
    } else {
        document.querySelector(".zz")?.classList.remove("jh2");
        setTimeout(() => {
            Dheader.header.row1.login.isLogin = true;
            document.querySelector(".zz")?.classList.remove("jh1");
        }, 500);
    }
};
</script>
<style scoped lang="scss">
.DLogin {
    width: 100%;
    height: 100vh;
    display: flex;
    @media only screen and (max-width: 1000px) {
        .item1 {
            flex: 0;
        }
    }
    @media only screen and (min-width: 1000px) {
        .item1 {
            flex: 1 !important;
            min-height: 600px;
            .el-image {
                margin-top: 100px;
                width: 500px;
                height: 500px;
            }
        }
    }

    .item2 {
        flex: 1;
        min-height: 600px;
        .box-card {
            margin: 0px auto;
            position: relative;
            margin-top: 15vh;
            width: 400px;
            height: 500px;
            overflow: hidden;
            .zz {
                display: flex;
                justify-content: center;
                position: absolute;
                z-index: 1;
                top: 90%;
                left: -50%;
                width: 200%;
                height: 20%;
                border-radius: 50%;
                background-color: aliceblue;
                transition: all 0.5s linear;

                span {
                    position: relative;
                    top: 10%;
                    left: 1%;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            .jh1 {
                top: -80%;
                height: 200%;
            }

            .jh2 {
                top: -10%;
                height: 20%;
                span {
                    position: relative;
                    top: 60%;
                }
            }
        }
    }
}
</style>
